<template>
  <view>
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <!-- 循环渲染轮播图的 item 项 -->
      <swiper-item v-for="(item, i) in swiperList" :key="i">
        <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail'">
          <!-- 动态绑定图片的 src 属性 -->
          <image :src="item.image_src"></image>
        </navigator>
      </swiper-item>
    </swiper>

    <!-- 获取分类导航信息 -->
    <view style="display: flex; justify-content:space-around;margin: 10px 0;">
      <view v-for="(item,index) in navList" :key="index">
        <image @click="imgUrl(item)" :src="item.image_src" style="width: 80px;height: 80px;"></image>
        <!-- <view>{{item.name}}</view> -->
      </view>
    </view>


    <!-- 获取楼层列表数据 --> 
    <view v-for="(item,index) in floorList" style="padding: 0 10px;">
      <!-- 楼层标题  -->
      <image :src="item.floor_title.image_src" style="width: 300px;height: 25px;margin-top: 5px;" ></image>
      <!-- 楼层主体 -->
      <view style="display: flex;">
        <!-- 左侧图片盒子 -->
        <navigator class="left-img-box" :url="item.product_list[0].url">
          <image :src="item.product_list[0].image_src" style="width: 110px;height: 190px;margin-right: 5px;" ></image>
        </navigator>
        <!-- 右侧图片盒子 -->
        <view class="right-img-box" style="display: flex;flex-wrap: wrap;align-content: space-between;">
          <navigator v-for="(item1,index) in item.product_list" :key="index" :url="item.product_list[0].url">
            <image v-if="index != 0" :src="item1.image_src" style="width: 110px;height: 90px;margin-right: 10px;"></navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 1. 轮播图的数据列表，默认为空数组
        swiperList: [],
        // 获取分类导航信息
        navList: [],
        // 获取楼层列表数据
        floorList: []
      };
    },
    onLoad() {
      // 2. 在小程序页面刚加载的时候，调用获取轮播图数据的方法
      this.getSwiperList()
      // 获取分类导航信息
      this.getNavList()
      // 获取楼层列表数据
      this.getFloorList()
    },
    methods: {
      // 3. 获取轮播图数据的方法
      async getSwiperList() {
        // 3.1 发起请求
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/home/swiperdata')

        // 3.2 请求失败
        if (res.meta.status !== 200) {
          // 全局封装一个 uni.$showMsg() 方法，来简化 uni.showToast() 方法的调用
          return uni.$showMsg()
        }
        // 3.3 请求成功，为 data 中的数据赋值
        this.swiperList = res.message
      },

      // 获取分类导航信息
      async getNavList() {
        const {
          data
        } = await uni.$http.get('/api/public/v1/home/catitems')
        // console.log(data.message, 777)
        this.navList = data.message
      },
      // 点击图片跳转分类页
      imgUrl(item) {
        if (item.navigator_url) {
          uni.switchTab({
            url: '../cate/cate'
          })
        }
      },
      // 定义获取楼层列表数据的方法
      async getFloorList() {
        const {
          data
        } = await uni.$http.get('/api/public/v1/home/floordata')
        if (data.meta.status !== 200) return uni.$showMsg()
        // 通过双层 forEach 循环，处理 URL 地址
        data.message.forEach(floor=>{
          floor.product_list.forEach(item=>{
            item.url = '/subpkg/goods_list/goods_list?' + item.navigator_url.split('?')[1]
          });
          this.floorList = data.message;
        })
      },
    },
  }
</script>

<style lang="scss">
  swiper {
    height: 330rpx;

    .swiper-item,
    image {
      width: 100%;
      height: 100%;
    }
  }
</style>
